{extend name="base"}
{block name="main"}
<style type="text/css">
  .number_a{color: #409EFF}
  .number_a:hover{text-decoration: underline;}
</style>
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-input v-model="params.keyword" style="width: 250px;" size="small" placeholder="手机号、订单号" clearable>
              <el-select v-model="params.cate" slot="prepend" placeholder="请选择"style="width: 90px;">
                <el-option label="下单人" :value="0"></el-option>
                <el-option label="邀请人" :value="1"></el-option>
              </el-select>
            </el-input>
            <el-select v-model="params.vip_id" placeholder="请选择" size="small" clearable>
                <el-option
                    v-for="item in vip"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="params.status" placeholder="请选择" size="small" clearable>
                <el-option
                    v-for="item in status"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="params.is_admin" placeholder="请选择" size="small" clearable>
                <el-option
                    v-for="item in is_admin"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="params.pay" placeholder="请选择" size="small" clearable>
                <el-option
                    v-for="item in pay"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="params.order" placeholder="请选择" size="small" clearable>
                <el-option
                    v-for="item in order"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-date-picker
                  v-model="params.range"
                  type="daterange"
                  align="right"
                  unlink-panels
                  value-format="timestamp"
                  size="small"
                  range-separator="至"
                  start-placeholder="下单时间"
                  end-placeholder="下单时间"
                  :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>

        </el-col>
    </el-row>
  
    <div class="page">
      <span class="f_r page-total">共<span>{$list->total()}</span>条</span>
      {$list->render()|raw}
    </div>

    <el-table
        :default-expand-all="false"
        border
        show-summary
        :summary-method="getSummaries"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="下单用户"
          prop="tel">
          <template slot-scope="r">
                {{r.row.tel}}
                <template v-if="r.row.alipay_realname">（{{r.row.alipay_realname}}）</template>
                <template v-else-if="r.row.weixin_realname">（{{r.row.weixin_realname}}）</template>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="is_admin"
          width="80px"
          sortable>
            <template slot-scope="r">
                <el-tag type="info" size="mini" v-if="r.row.is_admin">后台订单</el-tag>
                <el-tag type="success" size="mini" v-else>前台订单</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="支付方式"
          align="center"
          prop="pay_type"
          width="80px"
          sortable>
            <template slot-scope="r">
                <el-tag size="mini" type="success" v-if="r.row.pay_type==='alipay'">支付宝</el-tag>
                <el-tag size="mini" type="primary" v-else-if="r.row.pay_type==='weixinpay'">微信支付</el-tag>
                <el-tag size="mini" type="info" v-else>测试数据</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="订单号"
          align="center"
          width="150"
          prop="number">
          <template slot-scope="r">
              <span class="number_a pointer" @click="showOrderInfo(r.row.id)">{{r.row.number}}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="邀请人"
          width="100"
          align="center">
            <template slot-scope="r">
                <template v-if="r.row.pid">
                  {{r.row.ptel}}
                  <template v-if="r.row.palipay_realname">（{{r.row.palipay_realname}}）</template>
                  <template v-else-if="r.row.pweixin_realname">（{{r.row.pweixin_realname}}）</template>
                </template>
                <el-tag type="info" size="mini" v-else>无</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="购买级别"
          prop="vip"
          align="center">
        </el-table-column>
        <el-table-column
          label="购买时长"
          prop="time"
          sortable
          width="110px"
          :formatter="vipTimeFormat"
          align="center">
        </el-table-column>
        <el-table-column
          label="原价"
          prop="raw_money"
          align="center">
        </el-table-column>
        <el-table-column
          label="优惠卷"
          prop="coupon_money"
          align="center">
        </el-table-column>
        <el-table-column
          label="实价"
          prop="money"
          align="center">
        </el-table-column>
        <el-table-column
          label="奖励比"
          prop="ratio"
          sortable
          align="center"
          :formatter="vipRatioFormat">
        </el-table-column>
        <el-table-column
          label="可领金额"
          prop="gain_money"
          align="center">
          <template slot-scope="r">
              {{r.row.ratio*r.row.money/100}}
          </template>
        </el-table-column>

        <el-table-column
          label="下单时间"
          align="center"
          width="140px"
          prop="s_time"
          sortable
          :formatter="dateFormats">
        </el-table-column>
        <el-table-column
          label="完成时间"
          align="center"
          prop="e_time"
          width="140px"
          sortable>
            <template slot-scope="r">
                <template v-if="r.row.e_time>0">{{dateFormat(r.row.e_time*1000,'Y-m-d H:i')}}</template>
                <el-tag type="info" size="mini" v-else>待付款</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          label="奖金领取状态"
          align="center"
          prop="is_gain"
          width="150px"
          sortable>
            <template slot-scope="r">
                <el-tag type="info" size="mini" v-if="r.row.is_admin">后台订单</el-tag>
                <el-tag type="success" size="mini" v-else-if="r.row.is_gain">已领取</el-tag>
                <el-tag type="info" size="mini" v-else-if="!r.row.pid">无邀请人</el-tag>
                <el-tag type="info" size="mini" v-else-if="r.row.expire_time*1000<Date.now()">已过期</el-tag>
                <el-tag type="info" size="mini" v-else-if="!r.row.state">未付款</el-tag>
                <el-tag type="warning" size="mini" v-else>待领奖</el-tag>
            </template>
        </el-table-column>
        
    </el-table>

    <div class="page">
      <span class="f_r page-total">共<span>{$list->total()}</span>条</span>
      {$list->render()|raw}
    </div>

    <!-- 订单详情 start -->
    <el-dialog :title="orderInfoTitle" width="800px" :visible.sync="orderInfoShow">
        <el-row class="p_y10">
          <el-col :span="8">
            订单号：{{orderInfo.number}}
          </el-col>
          <el-col :span="8">
            支付平台订单号：
            <template v-if="orderInfo.trade_no">{{orderInfo.trade_no}}</template>
            <el-tag size="mini" type="info" v-else>无</el-tag>
          </el-col>
          <el-col :span="8">
            订单类型：
            <template v-if="orderInfo.pay_type==='alipay'">支付宝</template>
            <template v-else-if="orderInfo.pay_type==='weixinpay'">微信支付</template>
            <el-tag size="mini" type="info" v-else>测试数据</el-tag>
          </el-col>
        </el-row>
        <el-table
            border
            :data="[orderInfo]"
            style="width: 100%">
            <el-table-column
              label="商品名称"
              prop="product_name">
            </el-table-column>
            <el-table-column
              label="订单金额"
              prop="raw_money"
              align="center">
            </el-table-column>
            <el-table-column
              label="优惠卷"
              prop="coupon_money"
              align="center">
            </el-table-column>
            
            <el-table-column
              label="商家实付"
              prop="money"
              align="center">
            </el-table-column>
            <el-table-column
              label="手续费"
              prop="coupon_money"
              align="center">
              <template slot-scope="c">
                <template v-if="c.row.pay_type==='alipay'">{{(c.row.money*0.55/100).toFixed(2)}}</template>
                <template v-else>--</template>
              </template>
            </el-table-column>
            <el-table-column
              label="实收净额"
              prop="coupon_money"
              align="center">
              <template slot-scope="c">
                <template v-if="c.row.pay_type==='alipay'">{{c.row.money-(c.row.money*0.55/100).toFixed(2)}}</template>
                <template v-else>{{c.row.money}}</template>
              </template>
            </el-table-column>
        </el-table>
        <el-row class="p_y20">
          <el-col :span="18">
            <el-steps :active="orderInfo.state+1" finish-status="success" process-status="error">
              <el-step title="下单时间" :description="dateFormat(orderInfo.s_time*1000)"></el-step>
              <el-step title="付款时间" :description="dateFormat(orderInfo.e_time*1000)" v-if="orderInfo.state"></el-step>
              <el-step title="完成时间" icon="el-icon-location" status="wait" v-else></el-step>
            </el-steps>
          </el-col>
          <el-col :span="24" class="p_y10">
            <hr>
          </el-col>
          <el-col :span="6" :offset="1">
            买家姓名： 
              <template v-if="orderInfo.realname">{{orderInfo.realname}}</template>
              <el-tag size="mini" type="info" v-else>未完善</el-tag>
            
          </el-col>
          <el-col :span="10">
            买家电话：{{orderInfo.tel}} 
          </el-col>
        </el-row>
    </el-dialog>
    <!-- 订单详情 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        status:[
            {id:0,name:'全部状态'},
            {id:1,name:'待付款'},
            {id:2,name:'已付款'},
        ],
        is_admin:[
            {id:0,name:'全部类型'},
            {id:1,name:'前台订单'},
            {id:2,name:'后台订单'},
        ],
        pay:[
            {id:'',name:'全部支付方式'},
            {id:'alipay',name:'支付宝支付'},
            {id:'weixinpay',name:'微信支付'},
            {id:'null',name:'银行卡支付'},
        ],
        order:[
            {id:0,name:'下单时间降序'},
            {id:1,name:'完成时间降序'},
            // {id:2,name:'完成时间升序'},
        ],
        vip:{$vip|raw},
        params:{$params|raw},

        orderInfoShow:false,
        orderInfoTitle:'',
        orderInfo:{},
        columns:{},
    },
    
    methods:{
        vipRatioFormat(row, column, val, index){
            if(val>0){
                return val+'%';
            }else{
                return '-';
            }
        },
        vipTimeFormat(row){
            let y=row.y,
                m=row.m,
                d=row.d;
            let str='';
            if(y>0){
                str+=y+'年';
            }
            if(m>0){
                str+=m+'个月';
            }
            if(d>0){
                str+=d+'天';
            }
            return str;
        },
        showOrderInfo(id){
            this._wspost("{:url('info')}",{id},res=>{
              this.orderInfo=res.data;
              if(res.data.is_admin){
                this.orderInfoTitle='订单详情（后台订单）';
              }else{
                this.orderInfoTitle='订单详情（前台订单）';
              }
              this.orderInfoShow=true;
            },false);
        },
        // 自定义合计
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          let keys=new Set(['raw_money','coupon_money','money']);
          this.columns=columns
          columns.forEach((column, index) => {
            if(index === 0) {
              sums[index] = '合计';
              return;
            }else if(column.property==='gain_money'){
              const values = data.map(item => Number(item['money']*item['ratio']/100));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] =sums[index].toFixed(2);
              } else {
                sums[index] = 'N/A';
              }
            }else if(keys.has(column.property)){
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                sums[index] =sums[index].toFixed(2);
              } else {
                sums[index] = 'N/A';
              }
            }
          });

          return sums;
        }
    },
});
</script>
{/block}